<template>
  <div id="manageQuestion">
    <h2>题目管理</h2>
    <a-table :columns="columns"
             :data="dataList"
             :pagination="{
               showTotal:true,
               pageSize:searchParams.pageSize,
               current:searchParams.current,
               total
             }"
             @page-change="onPageChange"
    >
      <template #optional="{ record }">
        <a-space>
          <a-button type="primary" @click="doUpdateQuestion(record)">修改</a-button>
          <a-button status="danger" @click="doDeleteQuestion(record)">删除</a-button>
        </a-space>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watchEffect } from "vue";
import message from "@arco-design/web-vue/es/message";
import { Question, QuestionControllerService } from "../../../generated";
import { useRouter } from "vue-router";

const dataList = ref([]);
const total = ref(0);
const searchParams = ref({
  pageSize: 10,
  current: 1
});
//表格列名与数据字段Name映射定义
const columns = [
  {
    title: "ID",
    dataIndex: "id"
  }, {
    title: "标题",
    dataIndex: "title"
  }, {
    title: "内容",
    dataIndex: "content"
  }, {
    title: "标签",
    dataIndex: "tags"
  }, {
    title: "答案",
    dataIndex: "answer"
  }, {
    title: "提交数",
    dataIndex: "submitNum"
  }, {
    title: "通过数",
    dataIndex: "acceptedNum"
  }, {
    title: "判题配置",
    dataIndex: "judgeConfig"
  }, {
    title: "判题用例",
    dataIndex: "judgeCase"
  }, {
    title: "用户ID",
    dataIndex: "userId"
  }, {
    title: "创建时间",
    dataIndex: "createTime"
  }, {
    title: "操作",
    slotName: "optional"
  }];

/**
 * 加载题目信息
 */
const loadQuestionData = async () => {
  const res = await QuestionControllerService.listQuestionByPageUsingPost(searchParams.value);
  if (res.code === 0) {
    dataList.value = res.data.records;
    total.value = res.data.total;
  } else {
    message.error("加载题目信息失败," + res.message);
  }
};

/**
 * 分页页码改变事件
 * @param pageNo
 */
const onPageChange = (pageNo: number) => {
  searchParams.value = {
    ...searchParams.value,
    current: pageNo
  };
};

/**
 * 监听searchParams值的变化,重新加载分页数据
 */
watchEffect(() => {
  loadQuestionData();
});

/**
 * 删除题目信息
 * @param questionInfo 题目信息
 */
const doDeleteQuestion = async (questionInfo: Question) => {
  const result = await QuestionControllerService.deleteQuestionUsingPost({ id: questionInfo.id });
  if (result.code === 0) {
    message.success("删除成功!");
    await loadQuestionData();
  } else {
    message.error("删除失败," + result.message);
  }
};

const router = useRouter();
/**
 * 修改题目信息
 * @param questionInfo 题目信息
 */
const doUpdateQuestion = (questionInfo: Question) => {
  //路由跳转
  router.push({
    path: "/update/question",
    query: {
      id: questionInfo.id
    }
  });
};

/**
 * 组件挂载函数,加载题目信息数据
 */
onMounted(() => {
  loadQuestionData();
});
</script>

<style scoped>
#manageQuestion {
}
</style>
